﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>左侧菜单栏</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        body{
            padding-top:70px;
        }
        .navbar-brand {
            padding-top:0;
            padding-bottom:0;
        }
        .listitem .listitem-head {
            float: left;
            padding-bottom: 20px;
        }

        .listitem img {
            width: 64px;
            height: 64px;
        }

        .listitem .listitem-body {
            float: left;
            padding: 0 10px;
            text-align: left;
        }

            .listitem .listitem-body .listitem-body-title {
                font-weight: bold;
            }

        .listitem a {
            color: #85c5f3;
            text-decoration: none;
        }

            .listitem a:hover {
                color: #ff6a00;
            }
    </style>
</head>
<body>
    <!-- 顶部导航栏开始 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
                    <span class="sr-only">Toggle</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="images/logo.png" style="height: 50px" />
                </a>
            </div>
            <div class="collapse navbar-collapse" id="nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">操作系统</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">UI</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            编程语言
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Java</a></li>
                            <li><a href="#">C#</a></li>
                            <li><a href="#">C++</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 顶部导航栏结束 -->

    <div class="container">
        <!-- 左侧可伸缩菜单栏开始 -->
        <div class="col-md-3">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#panel1">
                                数据库
                            </a>
                        </h4>
                    </div>
                    <div id="panel1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group" style="margin:0">
                                <a class="list-group-item active" href="#">
                                    SQL Server<span class="badge">20</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    Oracle<span class="badge">10</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    MySQL<span class="badge">30</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#panel2">
                                操作系统
                            </a>
                        </h4>
                    </div>
                    <div id="panel2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="list-group" style="margin:0">
                                <a class="list-group-item" href="#">
                                    Windows<span class="badge">20</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    Linux<span class="badge">10</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    Unix<span class="badge">30</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#panel3">
                                编程语言
                            </a>
                        </h4>
                    </div>
                    <div id="panel3" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="list-group" style="margin:0">
                                <a class="list-group-item" href="#">
                                    C++<span class="badge">20</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    C#<span class="badge">10</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    Java<span class="badge">30</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 左侧可伸缩菜单栏结束 -->

        <!-- 页面主内容开始 -->
        <div class="col-md-9">
            <!-- 横幅开始 -->
            <div class="jumbotron">
                <h2>SQL Server分论坛</h2>
                <p>安装与使用， T-SQL, 数据库建模, 视图、存储过程、事务、索引</p>
                <p><a class="btn btn-primary btn-lg">了解更多</a></p>
            </div>
            <!-- 横幅结束 -->
            <!-- 分栏开始 -->
            <div>
                <div class="listitem col-md-6">
                    <div class="listitem-head">
                        <a href="#">
                            <img src="images/4.jpg" class="img-rounded" />
                        </a>
                    </div>
                    <div class="listitem-body">
                        <span class="listitem-title">Jerry</span>
                        <div>
                            <a href="#">SQL Server 2012安装过程详解</a>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" title="佩服">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" title="不服">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="listitem col-md-6">
                    <div class="listitem-head">
                        <a href="#">
                            <img src="images/5.jpg" class="img-rounded" />
                        </a>
                    </div>
                    <div class="listitem-body">
                        <span class="listitem-title">Jam</span>
                        <div>
                            <a href="#">AdventureWorks数据库安装与分析</a>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" title="佩服">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" title="不服">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="listitem col-md-6">
                    <div class="listitem-head">
                        <a href="#">
                            <img src="images/6.jpg" class="img-rounded" />
                        </a>
                    </div>
                    <div class="listitem-body">
                        <span class="listitem-title">David</span>
                        <div>
                            <a href="#">基本插删改查语句</a>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" title="佩服">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" title="不服">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="listitem col-md-6">
                    <div class="listitem-head">
                        <a href="#">
                            <img src="images/4.jpg" class="img-rounded" />
                        </a>
                    </div>
                    <div class="listitem-body">
                        <span class="listitem-title">Jerry</span>
                        <div>
                            <a href="#">报表服务配置与使用</a>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" title="佩服">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" title="不服">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分栏结束 -->
        </div>

        <!-- 页面主内容开始 -->
    </div>

    <!-- 页尾开始 -->
    <div class="container text-center">
        <hr />
        北京中软国际教育科技有限公司&bull;卓越工程组
        <br />
        <br />
    </div>
    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
